import { Component } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import RenderDescription, {
    type DescItemDto
} from '@/components/render-descriotion/Index'
import ToolTipText from '@/components/tooltip-text/Index'
import TableRender, { type TableRenderColumnTypes } from '@/render/TableRender'
import type { ReportCaseResultDto } from '@/api/insurance/period/types'
import type { VxeColumnSlotTypes } from 'vxe-table'
@Component
export class SchemeView extends TableRender {
    noTablePadding = true
    tableColumnConfigOld = () => [
        {
            field: 'id',
            title: '方案编码',
            slots: {
                default: (({ row, column }: VxeColumnSlotTypes.ContentSlotParams) => { 
                    return <div class="text-blue-100">123</div>
                })
            }

        },{
            field: 'id',
            title:'方案简称'
        },{
            field: 'id',
            title:'生效日期'
        },{
            field: 'id',
            title:'方案类型'
        },{
            field: 'id',
            
            slots: {
                header: ({ row, column }: VxeColumnSlotTypes.ContentSlotParams) => {
                    return (
                        <div class="text-center text-green w-full text-center">
                            1-3类保费
                        </div>
                    )
                }
            },
            children: [
                { field: 'amount', title: '日保费'},
                { field: 'amount', title: '优惠'},
                { field: 'amount', title: '实际日保费'},
            ]
        },{
            field: 'id',
            slots: {
                header: ({ row, column }: VxeColumnSlotTypes.ContentSlotParams) => {
                    return (
                        <div class="text-center text-green">
                            4类保费
                        </div>
                    )
                }
            },
            children: [
                { field: 'amount', title: '日保费' },
                { field: 'amount', title: '优惠' },
                { field: 'amount', title: '实际日保费' },
            ]
        },{
            field: 'id',
            slots: {
                header: ({ row, column }: VxeColumnSlotTypes.ContentSlotParams) => {
                    return (
                        <div class="text-center text-green">
                            5类保费
                        </div>
                    )
                }
            },
            children: [
                { field: 'amount', title: '日保费' },
                { field: 'amount', title: '优惠' },
                { field: 'amount', title: '实际日保费' },
            ]
        },{
            field: 'id',
            title:'状态'
        },{
            field: 'id',
            title:'操作'
        }
    ] as TableRenderColumnTypes<ReportCaseResultDto>
	

    tableConfig() { 
        const obj = super.tableConfig()
        obj['headerAlign'] = 'center'
        return obj
    }
    render() {
        return (
            <div class="md:flex md:flex-col h-full overflow-auto">
                {this.renderTable()}
                {this.renderPager()}
            </div>
        )
    }
}

export default toNative<{}, {}>(SchemeView)